<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/lib/Hui-iconfont/1.0.8/iconfont.css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" th:href="@{/h-ui.admin/skin/default/skin.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}"/>
    <!--/meta 作为公共模版分离出去-->

    <title>注册</title>

</head>
<body>
<article class="page-container">
    <form method="post" class="form form-horizontal" id="form-change-password">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" autocomplete="off" placeholder="作为账号登录，请慎重" name="username" id="username">
                <span id="namemessage"></span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="password" class="input-text" autocomplete="off" placeholder="请输入密码" name="password" id="password">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="password" class="input-text" autocomplete="off" placeholder="请再次输入密码" name="againpassword" id="againpassword">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" autocomplete="off" name="Phone" id="Phone">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>验证码：</label>
            <div class="formControls col-xs-4 col-sm-6">
                <input type="text" class="input-text" autocomplete="off" name="code" id="code">
            </div>
            <div class="formControls col-xs-4 col-sm-3"><button class="ui grey button mini" type="button" onclick="sendsms()" href="javascript:void(0);" id="codebtn">获取验证码</button></div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button class="btn btn-primary radius" href="javascript:void(0);" type="button" disabled="disabled" id="formr">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script src="../../static/js/jquery-3.5.1.min.js" th:src="@{/js/jquery-3.5.1.min.js}"></script>
<!--<script type="text/javascript" src="../../static/lib/jquery/1.9.1/jquery.min.js" th:src="@{/lib/jquery/1.9.1/jquery.min.js}"></script>-->
<script type="text/javascript" src="../../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer /作为公共模版分离出去-->
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/jquery.validate.js" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/validate-methods.js" th:src="@{/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/messages_zh.js" th:src="@{/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript">
    //获取验证码
    function sendsms(){
        var phoneNum = $("#Phone").val();
        if(phoneNum == ""){

            return false;
        }
        $.ajax({
            type: 'post',
            cache: false,
            url: '/sy/syuser/ShortMessage',
            data: {'phoneNum':phoneNum},
            contenType: 'application/json;charset=utf-8',
            success: function (data) {
                if(data === "请输入正确的手机号码") alert("请输入正确的手机号码");
                if(data === "true"){
                    $("#codebtn").text("已发送")
                    $("#formr").removeAttr("disabled");
                }
            },
            error: function () {
                alert("请求失败了")
            }
        })
    }
    //检验用户名唯一性
    $(function () {
        $("#username").change(function () {
            var userName = $("#username").val();
            if(userName ===""){
                $("#namemessage").html("")
                return;
            }
            $.ajax({
                type: 'post',
                cache: false,
                url: '/sy/syuser/eqname',
                data: {
                    'userName': userName
                },
                contenType: 'application/json;charset=utf-8',
                success: function (data) {
                    if(data === "true"){
                        $("#namemessage").html("<span style='color: crimson'>*该用户名已存在</span>")
                    }
                    if(data === "false"){
                        $("#namemessage").html("<span style='color: green'>✔</span>")
                    }
                },
                error: function (message) {
                    console.log(message)
                }
            });
        });

    })
    //表单提交ajax
    $(function () {
        $("#formr").click(function () {
            var userName = $("#username").val();
            var userPwd = $("#againpassword").val();
            var userPhone = $("#Phone").val();
            var code = $("#code").val();
            $("#formr").text("已提交");
            $.ajax({
                type: 'post',
                cache: false,
                url: '/sy/syuser/adduser',
                data: {
                    'userName': userName,
                    'userPwd': userPwd,
                    'userPhone': userPhone,
                    'code': code
                },
                contenType: 'application/json;charset=utf-8',
                success: function (data) {
                    switch (data) {
                        case "验证码错误": alert("验证码错误");break;
                        case "该用户名已被占用":alert("该用户名已被占用");break;
                        case "ok": alert("注册成功,请记住账号和密码："+userName+"\n"+userPwd);window.location.replace("/sy/syuser/goregistered");break;
                    }
                },
                error: function (message) {
                    console.log(message)
                }
            })
        });
    })
    //表单验证
    $(function(){
        $("#form-change-password").validate({
            rules:{
                password:{
                    required:true,
                    minlength:6,
                    maxlength:18
                },
                againpassword:{
                    required:true,
                    minlength:6,
                    maxlength:18,
                    equalTo: "#password"
                },
                username:{
                    required:true,
                    maxlength:8
                },
                Phone:{
                    required:true,
                    digits:true,
                    isMobile:true
                },

            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                $(form).ajaxSubmit();
                var index = parent.layer.getFrameIndex(window.name);
                parent.$('.btn-refresh').click();
                parent.layer.close(index);
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>